<style>
  #goodsManage {
    width: 100%;
    min-width: 890px;
    position: relative;
  }
  
  #goodsManage .demo-table-expand {
    font-size: 0;
  }
  
  #goodsManage .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  
  #goodsManage .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 80%;
  }
  
  #goodsManage .el-table__expand-column .el-table__expand-icon {
    height: 39px;
  }
  
  #goodsManage .table {
    transition: 1s all;
  }
  
  #goodsManage .el-carousel__container {
    height: 440px;
  }
  
  .el-tooltip__popper {
    max-width: 400px;
  }
  
  .el-step__main {
    max-width: calc(100% - 60px);
  }
  
  #goodsManage .goodsManageTable {
    width: 95% !important;
    margin: 10px 20px 0;
  }
  
  #goodsManage .datePicker {
    width: 140px !important;
    height: 24px !important;
    margin-top: 29px;
    margin-right: 18px;
    float: left;
  }
  
  #goodsManage .datePicker .el-input__inner {
    border-radius: 2px !important;
    height: 24px !important;
  }
  
  #goodsManage .add {
    background: url("/static/images/add.png") no-repeat center;
  }
  
  #goodsManage .del {
    background: url("/static/images/del.png") no-repeat center;
  }
  
  #goodsManage .search {
    background: url("/static/images/search.png") no-repeat center;
  }
  
  #goodsManage .sel {
    background: url("/static/images/sel.png") no-repeat center;
  }
  
  #goodsManage .icon {
    float: left;
  }
  
  #goodsManage .btn span {
    float: left;
    margin-top: 4px;
    margin-left: 2px;
  }
  
  #goodsManage .btn {
    height: 24px;
    line-height: 1;
    border: none;
    background: #f8fafb;
    outline: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    float: left;
    font-size: 14px;
    color: #1f2d3d;
    margin-top: 29px;
    margin-right: 16px;
  }
  
  #goodsManage .btn-print {
    margin-right: 0;
  }
  
  #goodsManage .btn:hover {
    color: #5468ee;
  }
  
  #goodsManage .inner {
    margin: 0 20px;
  }
  
  #goodsManage .btn-nav {
    height: 60px;
    overflow: hidden;
  }
  
  #goodsManage .btn-nav .el-input .el-input__inner {
    height: 24px;
  }
  
  #goodsManage .btn-nav .el-input {
    float: left;
    margin-top: 29px;
    margin-right: 18px;
    width: 140px;
    height: 24px;
  }
  
  #goodsManage h4 {
    padding-left: 20px;
    margin-bottom: 0px;
  }
  
  #goodsManage .formBottom {
    margin-top: 10px;
  }
  
  #goodsManage .goodsManageCombinationDetails .el-date-editor.el-input {
    width: 100%;
  }
  
  #goodsManage .goodsManageCombinationDetails {
    margin-top: 30px;
  }
</style>
<style>
  .steps {
    position: absolute;
    bottom: 10px;
    left: 30px;
    margin: auto;
  }
  
  .el-dialog__headerbtn {
    position: absolute;
    right: 25px;
    top: 15px;
  }
  
  .el-step__main {
    margin-left: -8px !important;
  }
</style>
<style>
  .el-date-editor.el-input {
    width: 100%;
  }
</style>

<div id="goodsManage">
  <!--页面调整-->
  <el-row
      v-loading="showLoading"
      element-loading-text="拼命加载中">
    <div class="inner btn-nav">
      <el-input
          v-model="bgGoodsName"
          icon="search"
          placeholder="货品名称"></el-input>
      <el-input
          v-model="bgGoodsNo"
          icon="search"
          placeholder="货品编号"></el-input>
      <button @click="newInput" class="btn btn-add"><i
          class="icon add"></i><span>新增</span>
      </button>
      <button @click="multiSelectClick" class="btn btn-multiSelect"><i class="icon sel"></i><span>多选</span>
      </button>
      <button
          class="btn"
          @click="multiSelectDelete" v-show="multiSelect">批量删除
      </button>
    </div>
    <el-table
        :data="goodsManage"
        :max-height="config_table_height()"
        ref="table"
        class="goodsManageTable"
        @selection-change="multiSelectionChange"
        style="width: 100%">
      <el-table-column
          type="expand">
        <template scope="props">
          <el-row>
            <el-col :span="10">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="货品编号">
                  <el-tag type="success">{{props.row.bgGoodsNo}}</el-tag>
                </el-form-item>
                <el-form-item label="货品名称">
                  <span>{{ props.row.bgGoodsName        }}</span>
                </el-form-item>
                <el-form-item label="货品简称">
                  <span>{{ props.row.bgNamejc           }}</span>
                </el-form-item>
                
                <el-form-item label="整箱单位">
                  <span>{{ auto_dw(props.row.bgZxdw)   }}</span>
                </el-form-item>
                <el-form-item label="散支单位">
                  <span>{{ auto_dw(props.row.bgSzdw)   }}</span>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="14">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="货品体积">
                  <span>{{ props.row.bgGoodsTj   }}</span>
                </el-form-item>
                <el-form-item label="货品重量">
                  <span>{{ props.row.bgGoodsZl }}</span>
                </el-form-item>
                <el-form-item label="单价">
                  <span>{{ props.row.bgGoodsPrice       }}</span>
                </el-form-item>
                
                <el-form-item label="货品换算量">
                  <span>{{ props.row.bgHsl          }}</span>
                </el-form-item>
                <el-form-item label="规格">
                  <span>{{ props.row.bgGoodsGg    }}</span>
                </el-form-item>
                
                <el-form-item label="可用操作">
                  <el-button
                      size="small"
                      icon="edit"
                      @click="inlineEdit(props.$index, props.row)">
                  </el-button>
                  <el-button
                      size="small"
                      icon="delete"
                      type="danger"
                      @click="deleteOlder(props.$index, props.row)">删除
                  </el-button>
                </el-form-item>
                <el-form-item label="备注">
                  <el-tooltip class="item" effect="dark"
                              :content="props.row.bgRemarks"
                              placement="top">
                    <span class="remark">{{ props.row.bgRemarks }}</span>
                  </el-tooltip>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column
          label="货品名称"
          show-overflow-tooltip
          align="center">
        <template scope="scope">
          <span>{{ scope.row.bgGoodsName}}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="编号"
          show-overflow-tooltip
          align="center">
        <template scope="scope">
          <span>{{ scope.row.bgGoodsNo}}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="体积"
          show-overflow-tooltip
          align="center">
        <template scope="scope">
          <span>{{ scope.row.bgGoodsTj}}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="重量"
          show-overflow-tooltip
          align="center">
        <template scope="scope">
          <span>{{ scope.row.bgGoodsZl}}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="备注"
          show-overflow-tooltip
          align="center">
        <template scope="scope">
          <span>{{ scope.row.bgRemarks}}</span>
        </template>
      </el-table-column>
      <el-table-column
          v-if="multiSelect"
          type="selection"
          width="60">
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20, 100, 500, 1000, 5000, 10000]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="currentTotal">
      </el-pagination>
    </div>
  </el-row>
  <el-dialog
      size="large"
      v-model="dialogFormVisible">
    <div class="dialog-title clearfix" slot="title">
      <span class="el-dialog__title">{{form.title}}</span>
      <el-steps
          class="steps"
          :space="120"
          :active="dialogFormActive"
          finish-status="success">
      </el-steps>
    </div>
    <el-form :model="form" ref="ref_form" :rules="rule_form">
      <el-row>
        <el-col :span="10">
          <el-form-item
              label="货品编号"
              prop="bgGoodsNo"
              :label-width="formLabelWidth">
            <el-input
                v-model="form.bgGoodsNo        "
                auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item
              label="货品名称"
              prop="bgGoodsName"
              :label-width="formLabelWidth">
            <el-input
                v-model="form.bgGoodsName           "
                auto-complete="off"></el-input>
          </el-form-item>
          
          <el-form-item
              label="货品简称"
              prop="bgNamejc"
              :label-width="formLabelWidth">
            <el-input
                v-model="form.bgNamejc"
                auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item
              label="整箱单位"
              :label-width="formLabelWidth">
            <el-select
                v-model="form.bgZxdw"
                placeholder="请选择单据类型">
              <el-option :label="item.bdName" :value.number="item.bdDwId" v-for="item in dw1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
              label="散支单位"
              :label-width="formLabelWidth">
            <el-select
                v-model="form.bgSzdw"
                placeholder="请选择单据类型">
              <el-option :label="item.bdName" :value.number="item.bdDwId" v-for="item in dw2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
              label="备注"
              :label-width="formLabelWidth">
            <el-input
                v-model="form.bgRemarks"
                auto-complete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10" :offset="2">
          <el-form-item
              label="货品体积"
              prop="bgGoodsTj"
              :label-width="formLabelWidth">
            <el-input
                v-model.number="form.bgGoodsTj"
                auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item
              label="货品重量"
              :label-width="formLabelWidth">
            <el-input
                v-model.number="form.bgGoodsZl"
                auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item
              label="单价"
              :label-width="formLabelWidth">
            <el-input
                v-model="form.bgGoodsPrice"
                auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item
              label="换算量"
              prop="bgHsl"
              :label-width="formLabelWidth">
            <el-input
                v-model.number="form.bgHsl"
                auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item
              label="规格"
              :label-width="formLabelWidth">
            <el-input
                v-model.number="form.bgGoodsGg"
                auto-complete="off"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit" :loading="submitLoading">保存
      </el-button>
    </div>
  </el-dialog>
</div>

<script>
  var goodsManage = new Vue({
    el: '#goodsManage',
    prop: {},
    data: function () {
      return {
        goodsManage: [],                 //主页面 信息集合
        multipleSelection: [],           //主页面 多选集合
        multiSelect: false,              //主页面 多选状态 维护
        rule_form: autoValidate(validate_form()), //编辑验证规则

        bgGoodsName: '',                 //主页面 货品名称搜索 货品名称和货品编号是一个搜索条件
        bgGoodsNo: '',                   //主页面 货品编号  搜索

        showLoading: false,              //主页面 加载 维护

        currentPage: 1,                  //分页 当前页
        currentTotal: 1,                 //分页 总页数
        pageSize: 10,                    //分页 分页大小

        formLabelWidth: '120px',         //表单 配置

        form: _form(),                    //新建 弹出层 信息集合
        dialogFormActive: 0,             //新建 弹出层 steps 当前进度
        dialogFormVisible: false,        //新建 弹出层 是否可见
        submitLoading: false,            //新建 弹出层 提交等待

        pickerOption: {
          disabledDate: function (time) {
            return time.getTime() > Date.now();
          }
        },             //新建 弹出层 相对湿度选项

        dw: [],                          //单位 集合
      }
    },
    computed: {
      option: function () {
        return {
          "draw": 1,
          "pageNum": this.currentPage,
          "pageSize": this.pageSize,
          bgStatus: 1,
          "bgGoodsName": this.bgGoodsName.trim(),
          "bgGoodsNo": this.bgGoodsNo.trim()
        }
      },           //主页面 post 0
      dw1: function () {
        var temp = [];
        for (var i = 0; i < this.dw.length; i++) {
          if (this.dw[i].bdStatus == 1) {
            temp.push(this.dw[i]);
          }
        }
        return temp;
      },
      dw2: function () {
        var temp = [];
        for (var i = 0; i < this.dw.length; i++) {
          if (this.dw[i].bdStatus == 2) {
            temp.push(this.dw[i]);
          }
        }
        return temp;
      }
    },
    methods: {
      inlineEdit: function (index, row) {
        var step = _form();
        allPrposCb(step, function (obj, index) {
          if (typeof row[index] !== 'undefined') step[index] = row[index];
        });


        step.title = '编辑';
        this.form = step;


        this.dialogFormVisible = true;
        this.dialogFormActive = 0;
        if (obj.$refs.ref_form) {
          obj.$refs.ref_form.resetFields();
          obj.$refs.carousel.setActiveItem(0);
        }
      },                                  //TODO 行内按钮-编辑
      deleteOlder: function (index, row) {
        obj.$confirm('此操作将永久删除该货品单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function () {
          console.log(1111);
          remove(row, obj.goodsManage);
          p[6].post({
            ids: [row.bgGoodsId]
          });
        }).catch(function () {
          obj.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },                                 //TODO 行内按钮-删除
      multiSelectClick: function () {
        this.multiSelect = !this.multiSelect;
      },                                      //多选 状态维护
      multiSelectionChange: function (val, row) {
        this.multipleSelection = val;
      },                          //多选 选中控制
      multiSelectDelete: function () {
        obj.$confirm('此操作将永久删除这些货品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function () {
          var ids = [];
          for (var i = 0; i < obj.multipleSelection.length; i++) {
            ids.push(obj.multipleSelection[i].bgGoodsId);
            remove(obj.multipleSelection[i], obj.goodsManage);
          }
          p[6].post({
            ids: ids
          });
        }).catch(function () {
          obj.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },                                     //多选 删除

      handleSizeChange: function (val) {
        /*<debug>*/
        console.log('每页' + val + '条');
        /*</debug>*/
        this.pageSize = val;
        p[0].post(this.option);
      },                                   //分页 Size
      handleCurrentChange: function (val) {
        /*<debug>*/
        console.log('当前第' + val + '页');
        /*</debug>*/
        this.currentPage = val;
        p[0].post(this.option);
      },                                //分页 当前页

      newInput: function () {
        this.form = _form();
        this.dialogFormVisible = true;
        this.dialogFormActive = 0;
        if (obj.$refs.ref_form) {
          obj.$refs.ref_form.resetFields();
          obj.$refs.carousel.setActiveItem(0);
        }
      },                                              //按钮 新建入库单

      prev: function () {
        this.dialogFormActive--;
        this.$refs.carousel.prev();
      },                                                  //新建 弹出层banner控制 前一个
      next: function () {
        this.dialogFormActive++;
        this.$refs.carousel.next();
      },                                                  //新建 弹出层banner控制 后一个
      submit: function () {
        this.$refs['ref_form'].validate(function (valid) {
          if (valid) {
            if (obj.form.title === '新建货品') {
                p[9].post({ bgGoodsNo: obj.form.bgGoodsNo}, function (json) {
                    this.callbackAfter({status: json.status, model: '货品编号查重'}, function () {
                        p[2].post(obj.form);
                        obj.submitLoading = true;
                    })
                })
            } else {
              p[1].post(obj.form)
            }
            obj.dialogFormActive++;
              obj.submitLoading = false;
          } else {
            return false;
          }
        });
      },                                                //新建 表单提交

      submitRole: function () {
        this.loadingWarehouse = true;

        /*<prod>*/
        //TODO
        postModify(this, this.form);
        /*</prod>*/
        /*<debug>*/
        setTimeout(function () {
          obj.loadingWarehouse = false;
          obj.dialogRoleVisible = false;
          obj.$notify({
            title: '成功',
            message: '更换仓库管理成功！',
            type: 'success'
          });
        }, 1500);
        /*</debug>*/
      },                                            //新建 表单提交

      auto_dw: function (data) {
        for (var i = 0; i < this.dw.length; i++) {
          if (this.dw[i].bdDwId == data) {
            return this.dw[i].bdName;
          }
        }
        return '未知单位';
      }

    },
    watch: {
      bgGoodsName: function () {
        /*<debug>*/
        console.log(this.option);
        /*</debug>*/
        p[0].post(this.option);
      },
      bgGoodsNo: function () {
        /*<debug>*/
        console.log(this.option);
        /*</debug>*/
        p[0].post(this.option);
      }
    }
  });

  function _dw() {
    return {
      "bdDwId": 0,
      "bdName": "string",
      "bdStatus": 0,
      "bdIsdel": true,
      "bdCreatetime": new Date()
    }
  }

  function _form() {
    return {
      title: '新建货品',
      "bgGoodsId": 0,
      "bgGoodsNo": "",
      "bgGoodsName": "",
      "bgNamejc": "",
      "bgT": 0,
      "bgI": 0,
      "bgHsl": 0,
      "bgZxdw": 2,
      "bgSzdw": 1,
      "bgStatus": 1,
      "bgArehouseId": 0,
      "bgClientId": 0,
      "bgGoodsType": "",
      "bgGoodsTj": 0,
      "bgGoodsZl": 0,
      "bgGoodsPrice": 0,
      "bgCreatetime": (new Date()).toJSON(),
      "bgRemarks": "",
      "bgGoodsGg": "",
      "baseDws": []
    }
  }               //弹出层 form 模板
  function validate_form() {
    return {
        bgNamejc:'vNull',
      bgGoodsNo: 'vNull',
      bgGoodsName: 'vNull',
      bgHsl: ['vNull','vNumber','vN0Number','vNumberZ','vNumberZZ'],
      bgGoodsTj: ['vNull','vN0Number','vNumber','vNumberZ'],
    }
  }
  var obj = goodsManage;
  var p = [];
  // 0 货品管理 分页查询
  p[0] = autoPost({
    urlHock: "../../hock/goodsManage/page.json",
    urlProd: "/route/goodsManage/0",
    success: function (json) {
      obj.$data.goodsManage = json.data;
      obj.$data.currentTotal = json.recordsFiltered;
    }
  });
  // 1 货品管理 编辑
  p[1] = autoPost({
    urlHock: "../../hock/goodsManage/page.json",
    urlProd: "/route/goodsManage/1",
    success: function (json) {
      obj.submitLoading = false;
      this.callbackAfter({status: json.status, model: '货品编辑'}, function () {
        obj.dialogFormActive = 0;
        p[0].post(obj.option);
        if (obj.$refs.carousel) obj.$refs.carousel.setActiveItem(0);
        obj.dialogFormVisible = false;
      })
    }
  });
  // 2 货品管理 新增
  p[2] = autoPost({
    urlHock: "",
    urlProd: "/route/goodsManage/2",
    success: function (json) {
      obj.submitLoading = false;
      this.callbackAfter({status: json.status, model: '货品新增'}, function () {
        obj.dialogFormActive = 0;
        p[0].post(obj.option);
        if (obj.$refs.carousel) obj.$refs.carousel.setActiveItem(0);
        obj.dialogFormVisible = false;
      })
    }
  });
  // 6 货品管理 删除
  p[6] = autoPost({
    urlHock: "",
    urlProd: "/route/goodsManage/6",
    method: 'GET',
    success: function (json) {
      this.callbackAfter({status: json.status, model: '货品删除'});
    }
  });
  // 8 货品管理
  p[8] = autoPost({
    urlHock: "",
    urlProd: "/route/goodsManage/8",
    success: function (json) {
    }
  });
  // 9 货品管理 货品编号 查重
  p[9] = autoPost({
      urlHock: "",
      urlProd: "/route/goodsManage/9",
      method: 'POST'
  });
  // 10 货品管理 查询所有单位
  p[10] = autoPost({
    urlHock: "/hock/goodsManage/all.json",
    urlProd: "/route/goodsManage/10",
    success: function (json) {
      obj.dw = json.data;
    }
  });

  p[10].post({
    "bdIsdel": 1,
    "pageNum": 1,
    "pageSize": 999,
    "draw": 0
  }, function (json) {
    obj.dw = json.data;
    p[0].post(goodsManage.option);
  });
</script>